/*
  学习目标：掌握children属性
  children: 是props的一个特殊属性,  特指: 标签夹着的内容区域
  类似:vue中的插槽
  children: 也可以传递任意数据类型
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        {/* <Footer>hello React</Footer>
        <Footer>{123}</Footer>
        <Footer>{[1, 2, 3]}</Footer>
        <Footer>{{ name: 'zs' }}</Footer> */}

        {/* 传函数  传jsx */}
        <Footer>
          {() => {
            alert('点我干啥');
          }}
        </Footer>

        <Footer>{<i>123</i>}</Footer>
      </div>
    );
  }
}

function Footer({ children }) {
  console.log('children  ----->  ', children);
  return (
    <>
      <h1>footer - {children}</h1>
    </>
  );
}
